<template>
<v-app>
  <v-content>
    <v-container>
      <v-row style="margin-top: 6%">
        <v-col cols="8" style="">
          <div style="height: 30vh">
            <v-img src="../../../assets/讨论区主页.jpg" max-height="30vh" >
              <span style="position: absolute; bottom: 40%; left: 3%;font-size: 48px;color: white">讨论区</span>
              <PostDialog></PostDialog>
<!--              <v-btn style="position: absolute;bottom: 10%; left: 3%;color: white;font-size: 32px;border-radius: 30px" color="#FD564F" x-large><v-icon>mdi-lead-pencil</v-icon>&nbsp;发帖</v-btn>-->
            </v-img>
          </div>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="8" style="">
          <v-card
              class="item-card"
              v-for="(item, i) in items"
              style="margin-top: 3%"
              :key="i"
          >
            <v-row>
              <v-col cols="1" style="font-size: 24px" >
                <span style="font-size: 32px;color: #B5B5B5;width: 20%;margin-left: 40%">{{i+1}}</span>
              </v-col>
              <v-col cols="4" style="font-size: 24px">
                <span @click="viewpost(item.id)">{{item.title}}</span></v-col>
              <v-col cols="1">
                <Avatar v-bind:src="item.authorAvatar"></Avatar>
              </v-col>
              <v-col cols="2">
                <span style="font-size: 18px;color: #757575;font-family: 微软雅黑">{{item.authorName}}</span>
                <br>
                <span style="font-size: 18px;color:#B5B5B5;font-family: 微软雅黑" >发布于{{item.publishDate.substring(5,10)}}&nbsp;{{item.publishDate.substring(11,16)}}</span>
              </v-col>
              <v-col v-if="item.latestReply!=null" cols="1">
                <Avatar v-bind:src="item.latestReply.authorAvatar"></Avatar>
              </v-col>
              <v-col v-if="item.latestReply!=null" cols="2">
                <span style="font-size: 18px;color: #757575;font-family: 微软雅黑">{{item.latestReply.authorName}}</span>
                <br>
                <span style="font-size: 18px;color:#B5B5B5;font-family: 微软雅黑">最后回复于{{item.latestReply.publishDate.substring(5,10)}}&nbsp;{{item.latestReply.publishDate.substring(11,16)}}</span>
              </v-col>
              <v-col v-if="item.latestReply==null">暂无回复,等待解答</v-col>
            </v-row>
          </v-card>
          <div class="text-center" style="margin-top: 1vh;">
            <v-container>
              <v-row justify="center">
                <v-col cols="8">
                  <v-container class="max-width">
                    <v-pagination
                        @input="loadlist"
                        v-model="pageCount"
                        :length="totalCount"
                        :total-visible="7"
                        color="error"
                    ></v-pagination>
                  </v-container>
                </v-col>
              </v-row>
            </v-container>
          </div>
        </v-col>
        <v-col cols="4">
          <span style="color: #FF5151;font-size: 24px">▌</span>
          <span style="font-size: 24px"> 发帖须知</span>
          <v-card style="margin-top: 2%">
            <p style="font-size: 18px;margin-left: 4%;font-family: 微软雅黑;color: black">1.请不要讨论疫情无关话题</p>
            <p style="font-size: 18px;margin-left: 4%"></p>
            <p style="font-size: 18px;margin-left: 4%;font-family: 微软雅黑;color: black">2.请不要ghs</p>
          </v-card>
          <span style="color: #FF5151;font-size: 24px">▌</span>
          <span style="font-size: 24px"> 认证机构</span>
          <v-row>
            <v-col cols="4" v-for="(institute,i) in this.institutes" :key="i" style="text-align: center;">
              <v-card><v-img v-bind:src="institute.avatar"></v-img><span>{{institute.name}}</span></v-card>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-container>
  </v-content>
</v-app>
</template>

<script>
import PostDialog from "@/components/views/article/PostDialog";
import Avatar from "@/components/views/common/Avatar/Avatar";
export default {
  name: "Discuss",
  components: {Avatar, PostDialog},
  mounted() {
    this.getlist()
    this.getinstitute()
  },
  methods:{
    viewpost(id){
      this.$router.push("/post/"+id)
    },
    getinstitute(){

      console.log(this.instituteline)
      this.$api.article.getinstitute().then(res=>{
        if (res.success){
          this.institutes = res.data
        }
        else {
          this.$Message.error("加载失败")
        }
      }).catch(function (error) {
        console.log(error);
        this.$Message.error("请求失败,出现了意料之外的错误");
      });
    },
    getlist(){
      this.$api.article.getpostlist().then(res=>{
        if (res.success){
          this.list = res.data
          this.loadlist()
          if (this.list.length % 10==0){
            this.totalCount = parseInt(this.list.length/10)
          }
          else {
            this.totalpage = parseInt(this.list.length / 10 + 1)
          }
        }
        else {
          this.$Message.error("加载失败")
        }
      }).catch(function (error) {
        console.log(error);
        this.$Message.error("请求失败,出现了意料之外的错误");
      });
    },
    loadlist(){
      this.items = this.list.slice((this.pageCount-1)*15,(this.pageCount-1)*15+15)
    }
  },
  data: () => ({
    pageCount: 1, //分页请求的页码
    totalCount: 1, //返回的新闻详情的总条数
    //totalCount是每次请求后后端返回的存在与数据库中符合条件的数据条数总数
    limitCount: 7, //分页请求一次请求的数据条数
    institutes:[
      {
        name: "世界卫生组织",
        avatar:"https://heaven-1305422781.cos.ap-chengdu.myqcloud.com/407a07c5d62857b9b6e581ac5fcc1ad0.png"
      },
      {
        name: "世界卫生组织",
        avatar:"https://heaven-1305422781.cos.ap-chengdu.myqcloud.com/407a07c5d62857b9b6e581ac5fcc1ad0.png"
      },
      {
        name: "世界卫生组织",
        avatar:"https://heaven-1305422781.cos.ap-chengdu.myqcloud.com/407a07c5d62857b9b6e581ac5fcc1ad0.png"
      },
      {
        name: "世界卫生组织",
        avatar:"https://heaven-1305422781.cos.ap-chengdu.myqcloud.com/407a07c5d62857b9b6e581ac5fcc1ad0.png"
      },
      {
        name: "世界卫生组织",
        avatar:"https://heaven-1305422781.cos.ap-chengdu.myqcloud.com/407a07c5d62857b9b6e581ac5fcc1ad0.png"
      },
      {
        name: "test",
        avatar:"https://heaven-1305422781.cos.ap-chengdu.myqcloud.com/407a07c5d62857b9b6e581ac5fcc1ad0.png"
      },

    ],
    list :[],
    items: [
      // {
      //   id:123,
      //   title:"标题标题标题标题标题标题标",
      //   authorName: "author1",
      //   authorAvatar: "https://heaven-1305422781.cos.ap-chengdu.myqcloud.com/407a07c5d62857b9b6e581ac5fcc1ad0.png",
      //   publishDate: "2021-07-10T11:17:44.083+00:00",
      //   latestReply:{
      //     authorName: "author2",
      //     authorAvatar: "https://heaven-1305422781.cos.ap-chengdu.myqcloud.com/407a07c5d62857b9b6e581ac5fcc1ad0.png",
      //     publishDate: "2021-07-10T22:17:44.083+00:00",
      //   }
      // },
      // {
      //   id:123,
      //   title:"标题标题标题标题标题标题标",
      //   authorName: "author1",
      //   authorAvatar: "https://heaven-1305422781.cos.ap-chengdu.myqcloud.com/407a07c5d62857b9b6e581ac5fcc1ad0.png",
      //   publishDate: "2021-07-10T11:17:44.083+00:00",
      //   latestReply:{
      //     authorName: "author2",
      //     authorAvatar: "https://heaven-1305422781.cos.ap-chengdu.myqcloud.com/407a07c5d62857b9b6e581ac5fcc1ad0.png",
      //     publishDate: "2021-07-10T22:17:44.083+00:00",
      //   },
      // }
    ],
  })
}
</script>

<style scoped>
.temp{
  display: flex;
}
</style>